<div class="m-subheader">
	<div class="d-flex align-items-center">
		<div class="mr-auto">
			<h3 class="m-subheader__title m-subheader__title--separator">
				PrimeNG
			</h3>
			<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
				<li class="m-nav__item m-nav__item--home">
					<a href="#" class="m-nav__link m-nav__link--icon">
						<i class="m-nav__link-icon la la-home"></i>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a  class="m-nav__link">
						<span class="m-nav__link-text">
							PrimeNG
						</span>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a  class="m-nav__link">
						<span class="m-nav__link-text">
							Panel
						</span>
					</a>
				</li>
			</ul>
		</div>
		<div>
			<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
				<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--outline-2x m-btn--air m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
					<i class="la la-plus m--hide"></i>
					<i class="la la-ellipsis-h"></i>
				</a>
				<div class="m-dropdown__wrapper">
					<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
					<div class="m-dropdown__inner">
						<div class="m-dropdown__body">
							<div class="m-dropdown__content">
								<ul class="m-nav">
									<li class="m-nav__section m-nav__section--first m--hide">
										<span class="m-nav__section-text">
											Quick Actions
										</span>
									</li>
									<li class="m-nav__item">
										<a  class="m-nav__link">
											<i class="m-nav__link-icon flaticon-share"></i>
											<span class="m-nav__link-text">
												Activity
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a  class="m-nav__link">
											<i class="m-nav__link-icon flaticon-chat-1"></i>
											<span class="m-nav__link-text">
												Messages
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a  class="m-nav__link">
											<i class="m-nav__link-icon flaticon-info"></i>
											<span class="m-nav__link-text">
												FAQ
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a  class="m-nav__link">
											<i class="m-nav__link-icon flaticon-lifebuoy"></i>
											<span class="m-nav__link-text">
												Support
											</span>
										</a>
									</li>
									<li class="m-nav__separator m-nav__separator--fit"></li>
									<li class="m-nav__item">
										<a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">
											Submit
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
	<div class="alert alert-brand m-alert m-alert--icon m-alert--air m-alert--square m--margin-bottom-30" role="alert">
		<div class="m-alert__icon">
			<i class="flaticon-exclamation-1"></i>
		</div>
		<div class="m-alert__text">
			<b>PrimeNG</b> is an open source collection of rich UI components for Angular. Here are some components from PrimeNG.
			For more info please check out <a class="m-link m-link--warning m--font-bold" href="https://www.primefaces.org/primeng/#/" target="_blank">the official documentation.</a>
		</div>
		<div class="m-alert__close">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-6">
			<!--begin::Portlet-->
			<div class="m-portlet">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<h3 class="m-portlet__head-text">
								Buttons
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<div class="m-section__sub">Default</div>
						<div class="m-section__content">
							<p-accordion>
								<p-accordionTab header="Start Adventure" [selected]="true">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
									dolore
									magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
									commodo
									consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
									pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
									est
									laborum.
								</p-accordionTab>
								<p-accordionTab header="Solve A Problem">
									Sed vitae dolor purus. Nulla laoreet enim quis orci molestie aliquam. Donec eleifend nibh id luctus
									imperdiet.
									Donec tellus justo, imperdiet quis turpis in, interdum rhoncus lorem. Proin ac sem augue. Praesent
									condimentum
									varius arcu nec dapibus. Suspendisse quis egestas justo, eget semper lectus. Nulla facilisi.
								</p-accordionTab>
								<p-accordionTab header="Your Business">
									Vivamus auctor, ante ac laoreet cursus, metus leo vehicula dui, eu commodo orci risus at neque. Suspendisse
									vitae pretium magna. Donec tincidunt quis arcu nec porta. Donec luctus porta sem, non luctus leo imperdiet
									rhoncus. Nulla lectus turpis, interdum vitae est eu, efficitur efficitur nisi. Phasellus consequat lectus ac
									metus pharetra pellentesque. Duis blandit sapien urna, eu imperdiet velit commodo eget. Phasellus porta
									massa
									scelerisque, commodo orci et, feugiat urna. Nulla volutpat hendrerit tortor, nec consequat justo. Nullam
									placerat hendrerit massa sed varius. Aenean molestie dapibus interdum. Etiam semper mollis hendrerit. Etiam
									sodales fermentum sem, porttitor venenatis arcu semper in. Proin non volutpat quam, vel sollicitudin mauris.
								</p-accordionTab>
							</p-accordion>
						</div>
						<div class="m-section__sub">Multiple</div>
						<div class="m-section__content">
							<p-accordion [multiple]="true">
								<p-accordionTab header="Start Adventure">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
									dolore
									magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
									commodo
									consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
									pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
									est
									laborum.
								</p-accordionTab>
								<p-accordionTab header="Solve A Problem">
									Sed vitae dolor purus. Nulla laoreet enim quis orci molestie aliquam. Donec eleifend nibh id luctus
									imperdiet.
									Donec tellus justo, imperdiet quis turpis in, interdum rhoncus lorem. Proin ac sem augue. Praesent
									condimentum
									varius arcu nec dapibus. Suspendisse quis egestas justo, eget semper lectus. Nulla facilisi.
								</p-accordionTab>
								<p-accordionTab header="Your Business">
									Vivamus auctor, ante ac laoreet cursus, metus leo vehicula dui, eu commodo orci risus at neque. Suspendisse
									vitae pretium magna. Donec tincidunt quis arcu nec porta. Donec luctus porta sem, non luctus leo imperdiet
									rhoncus. Nulla lectus turpis, interdum vitae est eu, efficitur efficitur nisi. Phasellus consequat lectus ac
									metus pharetra pellentesque. Duis blandit sapien urna, eu imperdiet velit commodo eget. Phasellus porta
									massa
									scelerisque, commodo orci et, feugiat urna. Nulla volutpat hendrerit tortor, nec consequat justo. Nullam
									placerat hendrerit massa sed varius. Aenean molestie dapibus interdum. Etiam semper mollis hendrerit. Etiam
									sodales fermentum sem, porttitor venenatis arcu semper in. Proin non volutpat quam, vel sollicitudin mauris.
								</p-accordionTab>
							</p-accordion>
						</div>
						<div class="m-section__sub">Tab Change Event</div>
						<div class="m-section__content">
							<p-accordion (onClose)="onTabClose($event)" (onOpen)="onTabOpen($event)">
								<p-accordionTab header="Start Adventure">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
									dolore
									magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
									commodo
									consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
									pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
									est
									laborum.
								</p-accordionTab>
								<p-accordionTab header="Solve A Problem">
									Sed vitae dolor purus. Nulla laoreet enim quis orci molestie aliquam. Donec eleifend nibh id luctus
									imperdiet.
									Donec tellus justo, imperdiet quis turpis in, interdum rhoncus lorem. Proin ac sem augue. Praesent
									condimentum
									varius arcu nec dapibus. Suspendisse quis egestas justo, eget semper lectus. Nulla facilisi.
								</p-accordionTab>
								<p-accordionTab header="Your Business">
									Vivamus auctor, ante ac laoreet cursus, metus leo vehicula dui, eu commodo orci risus at neque. Suspendisse
									vitae pretium magna. Donec tincidunt quis arcu nec porta. Donec luctus porta sem, non luctus leo imperdiet
									rhoncus. Nulla lectus turpis, interdum vitae est eu, efficitur efficitur nisi. Phasellus consequat lectus ac
									metus pharetra pellentesque. Duis blandit sapien urna, eu imperdiet velit commodo eget. Phasellus porta
									massa
									scelerisque, commodo orci et, feugiat urna. Nulla volutpat hendrerit tortor, nec consequat justo. Nullam
									placerat hendrerit massa sed varius. Aenean molestie dapibus interdum. Etiam semper mollis hendrerit. Etiam
									sodales fermentum sem, porttitor venenatis arcu semper in. Proin non volutpat quam, vel sollicitudin mauris.
								</p-accordionTab>
								<p-accordionTab header="Godfather IV" [disabled]="true">
									After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the
									well
									for this third and final story of the fictional Corleone crime family. Two decades have passed, and crime
									kingpin Michael Corleone, now divorced from his wife Kay has nearly succeeded in keeping his promise that
									his
									family would one day be completely legitimate.
								</p-accordionTab>
							</p-accordion>
						</div>
						<div class="m-section__sub">Programmatic Change</div>
						<div class="m-section__content">
							<div style="margin-bottom: 1em">
								<button type="button" pButton icon="fa fa-chevron-up" (click)="openPrev()"></button>
								<button type="button" pButton icon="fa fa-chevron-down" (click)="openNext()"></button>
							</div>
							<p-accordion [activeIndex]="index">
								<p-accordionTab header="Start Adventure">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
									dolore
									magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
									commodo
									consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
									pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
									est
									laborum.
								</p-accordionTab>
								<p-accordionTab header="Solve A Problem">
									Sed vitae dolor purus. Nulla laoreet enim quis orci molestie aliquam. Donec eleifend nibh id luctus
									imperdiet.
									Donec tellus justo, imperdiet quis turpis in, interdum rhoncus lorem. Proin ac sem augue. Praesent
									condimentum
									varius arcu nec dapibus. Suspendisse quis egestas justo, eget semper lectus. Nulla facilisi.
								</p-accordionTab>
								<p-accordionTab header="Your Business">
									Vivamus auctor, ante ac laoreet cursus, metus leo vehicula dui, eu commodo orci risus at neque. Suspendisse
									vitae pretium magna. Donec tincidunt quis arcu nec porta. Donec luctus porta sem, non luctus leo imperdiet
									rhoncus. Nulla lectus turpis, interdum vitae est eu, efficitur efficitur nisi. Phasellus consequat lectus ac
									metus pharetra pellentesque. Duis blandit sapien urna, eu imperdiet velit commodo eget. Phasellus porta
									massa
									scelerisque, commodo orci et, feugiat urna. Nulla volutpat hendrerit tortor, nec consequat justo. Nullam
									placerat hendrerit massa sed varius. Aenean molestie dapibus interdum. Etiam semper mollis hendrerit. Etiam
									sodales fermentum sem, porttitor venenatis arcu semper in. Proin non volutpat quam, vel sollicitudin mauris.
								</p-accordionTab>
								<p-accordionTab header="Godfather IV">
									After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the
									well
									for this third and final story of the fictional Corleone crime family. Two decades have passed, and crime
									kingpin Michael Corleone, now divorced from his wife Kay has nearly succeeded in keeping his promise that
									his
									family would one day be completely legitimate.
								</p-accordionTab>
							</p-accordion>
						</div>
					</div>
					<!--end::Section-->
				</div>
			</div>
			<!--end::Portlet-->
		</div>
		<div class="col-lg-6">
			<!--begin::Portlet-->
			<div class="m-portlet">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<h3 class="m-portlet__head-text">
								Panel
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<div class="m-section__content">
							<p-growl [value]="msgs"></p-growl>
							<p-panel header="Godfather I" [toggleable]="true" [style]="{'margin-bottom':'20px'}">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas lorem. Cras sit amet nunc sem.
								Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Duis consequat sodales quam eget
								accumsan. Quisque pharetra ipsum at nibh lobortis volutpat. Nulla sodales nibh et pretium hendrerit. Nunc
								feugiat velit quis tincidunt malesuada. Praesent laoreet tortor ut turpis ullamcorper tempor. Etiam at augue
								ultricies, molestie velit vel, fermentum tellus. Aenean tellus massa, finibus non leo et, feugiat blandit felis.
								Praesent sit amet nisi tincidunt, tristique odio ac, ultrices velit. Aliquam eget quam gravida, lacinia nisi a,
								interdum ipsum.
							</p-panel>
							<p-panel>
								<p-header>
									<div class="ui-helper-clearfix">
									<span class="ui-panel-title"
										  style="font-size:16px;display:inline-block;margin-top:2px">Custom Header</span>
										<p-splitButton [style]="{'float':'right'}" label="Save" icon="fa-check" (onClick)="save()"
													   [model]="items"></p-splitButton>
									</div>
								</p-header>
								Sed vitae dolor purus. Nulla laoreet enim quis orci molestie aliquam. Donec eleifend nibh id luctus imperdiet.
								Donec tellus justo, imperdiet quis turpis in, interdum rhoncus lorem. Proin ac sem augue. Praesent condimentum
								varius arcu nec dapibus. Suspendisse quis egestas justo, eget semper lectus. Nulla facilisi.
								<p-footer>
									<button pButton type="button" icon="fa-plus" label="New" class="ui-button-info"></button>
									<button pButton type="button" icon="fa-list" label="View" class="ui-button-success"></button>
								</p-footer>
							</p-panel>
						</div>
					</div>
					<!--end::Section-->
				</div>
			</div>
			<!--end::Portlet-->
			<!--begin::Portlet-->
			<div class="m-portlet">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<h3 class="m-portlet__head-text">
								Fieldset
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<div class="m-section__content">
							<p-fieldset legend="Lorem ipsum">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas lorem. Cras sit amet nunc sem.
								Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Duis consequat sodales quam eget
								accumsan. Quisque pharetra ipsum at nibh lobortis volutpat. Nulla sodales nibh et pretium hendrerit. Nunc
								feugiat velit quis tincidunt malesuada. Praesent laoreet tortor ut turpis ullamcorper tempor. Etiam at augue
								ultricies, molestie velit vel, fermentum tellus. Aenean tellus massa, finibus non leo et, feugiat blandit felis.
								Praesent sit amet nisi tincidunt, tristique odio ac, ultrices velit. Aliquam eget quam gravida, lacinia nisi a,
								interdum ipsum.
							</p-fieldset>
						</div>
						<div class="m-section__content">
							<p-fieldset legend="Toggleable" [toggleable]="true">
								Vivamus auctor, ante ac laoreet cursus, metus leo vehicula dui, eu commodo orci risus at neque. Suspendisse
								vitae pretium magna. Donec tincidunt quis arcu nec porta. Donec luctus porta sem, non luctus leo imperdiet
								rhoncus. Nulla lectus turpis, interdum vitae est eu, efficitur efficitur nisi. Phasellus consequat lectus ac
								metus pharetra pellentesque. Duis blandit sapien urna, eu imperdiet velit commodo eget. Phasellus porta massa
								scelerisque, commodo orci et, feugiat urna. Nulla volutpat hendrerit tortor, nec consequat justo. Nullam
								placerat hendrerit massa sed varius. Aenean molestie dapibus interdum. Etiam semper mollis hendrerit. Etiam
								sodales fermentum sem, porttitor venenatis arcu semper in. Proin non volutpat quam, vel sollicitudin mauris.
							</p-fieldset>
						</div>
					</div>
					<!--end::Section-->
				</div>
			</div>
			<!--end::Portlet-->
		</div>
	</div>
</div>